import CodeBlock from "@theme/CodeBlock"

## Toggle Props

![toggle-component](https://github.com/user-attachments/assets/ffbbe61e-9aea-4895-ab19-d38f76b3e379)

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} />`}</CodeBlock>

### `status`

The `status` prop is used to determine the interactability or style of the toggle. It can be set to `disabled` or `error`. It is `null` by default.

When set to `error`, elements of the toggle will have their colors set to `colors.errorBackground` or `colors.error`.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} status="disabled" />`}</CodeBlock>

### `editable`

The `editable` prop determines whether the toggle is interactable. It is `true` by default. Setting the `status` prop to `disabled` also will set `editable` to `false`.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} editable={false} />`}</CodeBlock>

### `value`

The `value` prop determines whether the toggle is on or off. It is `false` by default.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} value={true} />`}</CodeBlock>

### `onValueChange`

The `onValueChange` prop is a callback that is called when the toggle is toggled. It is `undefined` by default. Since the toggle is controlled, you must set the `value` prop in this callback to update the toggle.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} onValueChange={setValue} />`}</CodeBlock>

### `containerStyle`

The `containerStyle` prop is a style object that is applied to the container of the toggle.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} containerStyle={{ backgroundColor: "#fff" }} />`}</CodeBlock>

### `inputOuterStyle`

The `inputOuterStyle` prop is a style object that is applied to the outer container of the toggle input. This gives the inputs their size, shape, "off" background-color, and outer border.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} inputOuterStyle={{ backgroundColor: "#fff" }} />`}</CodeBlock>

### `inputInnerStyle`

The `inputInnerStyle` prop is a style object that is applied to the inner container of the toggle input. This gives the inputs their "on" background-color and inner border.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} inputInnerStyle={{ backgroundColor: "#000" }} />`}</CodeBlock>

### `inputDetailStyle`

The `inputDetailStyle` prop is a style object that is applied to the detail container of the toggle input. For checkbox, this affects the Image component. For radio, this affects the dot View. For switch, this affects the knob View.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} inputDetailStyle={{ backgroundColor: "#000" }} />`}</CodeBlock>

### `labelPosition`

The `labelPosition` prop determines the position of the label relative to the action component. It can be `left` or `right`. It is `right` by default.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} labelPosition="left" />`}</CodeBlock>

### `label`

The `label` prop is a string that is used as the label for the toggle.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} label="Remember Me" />`}</CodeBlock>

### `labelTx`

The `labelTx` prop is a key to a string in the `i18n` translation file. It is used as the label for the toggle.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} labelTx="login:rememberUsername" />`}</CodeBlock>

### `labelTxOptions`

The `labelTxOptions` prop is an object that is passed to the `i18n` translation function. It is used to pass in values to the translation string.

<CodeBlock language="tsx">
  {`\<${props.componentName}
  value={value}
  onValueChange={setValue}
  labelTx="login:rememberUsername"
  labelTxOptions={{ username: "john" }}
/>`}
</CodeBlock>

### `labelStyle`

The `labelStyle` prop is a `StyleProp<TextStyle>` object that is applied to the label.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} labelStyle={{ color: "#000" }} />`}</CodeBlock>

### `LabelTextProps`

The `LabelTextProps` prop is a `TextProps` object (from the [`Text`](./Text.md)) component that is applied to the label.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} LabelTextProps={{ size: "lg" }} />`}</CodeBlock>

### `helper`

The `helper` prop is a string that is used as the helper for the toggle.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} helper="Remember Me" />`}</CodeBlock>

### `helperTx`

The `helperTx` prop is a key to a string in the `i18n` translation file. It is used as the helper for the toggle.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} helperTx="login:rememberUsername" />`}</CodeBlock>

### `helperTxOptions`

The `helperTxOptions` prop is an object that is passed to the `i18n` translation function. It is used to pass in values to the translation string.

<CodeBlock language="tsx">
  {`\<${props.componentName}
  value={value}
  onValueChange={setValue}
  helperTx="login:rememberUsername"
  helperTxOptions={{ username: "john" }}
/>`}
</CodeBlock>

### `HelperTextProps`

The `HelperTextProps` prop is a `TextProps` object (from the [`Text`](./Text.md)) component that is applied to the helper.

<CodeBlock language="tsx">{`\<${props.componentName} value={value} onValueChange={setValue} HelperTextProps={{ size: "lg" }} />`}</CodeBlock>
